<template>
    <div v-loading="loading" class="client-box">
        <topTitle title="客户信息"/>
        <el-form v-if="!loading" :model="detail" :rules="rules" ref="detail" label-width="120px" class="input-no-border-box form-box">
            <el-form-item label="公司全称" prop="companyFullName">
                <el-input v-model="detail.companyFullName"></el-input>
            </el-form-item>
            <el-form-item label="公司简称" prop="companyShortName">
                <el-input v-model="detail.companyShortName"></el-input>
            </el-form-item>
            <el-form-item label="投放属性" prop="putType">
                <el-radio-group v-model="detail.putType">
                    <el-radio :label="0">代理</el-radio>
                    <el-radio :label="1">直投</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="营业执照" prop="companyLicense">
                <el-upload
                    action="/admin/file/uploadPic"
                    :show-file-list="false"
                    accept=".jpg,.jpeg,.png"
                    :on-success="handleAvatarSuccess">
                    <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
                <img :src="detail.companyLicense" alt="" style="width:200px;" v-if="detail.companyLicense">
                <div class="license-tip">
                    <span>请上传</span>
                    <span class="tip-red">加盖公司公章的营业执照扫描件</span>
                    <span>，jpg、jpeg、png格式的图片（建议不超过5M）</span>
                </div>
            </el-form-item>

            <el-form-item label="营业执照注册号" prop="registerNumber">
                <el-input v-model="detail.registerNumber" type="number"></el-input>
            </el-form-item>
            <el-form-item label="联系人" prop="userName">
                <el-input v-model="detail.userName"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="phone">
                <el-input v-model="detail.phone" type="number"></el-input>
            </el-form-item>
            <el-form-item label="联系邮箱" prop="email">
                <el-input v-model="detail.email"></el-input>
            </el-form-item>
        </el-form>

        <topTitle title="投放信息"/>

        <el-table
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column
                width="80"
                prop="id"
                label="id">
            </el-table-column>

            <el-table-column
                label="游戏名称">
                <template slot-scope="scope">
                    <span>{{scope.row.gameName || '-'}}</span>
                </template>
            </el-table-column>

            <el-table-column
                label="单价（元）">
                <template slot-scope="scope">
                    <span>{{scope.row.money || '-'}}</span>
                </template>
            </el-table-column>

            <el-table-column
                label="下载量">
                <template slot-scope="scope">
                    <span>{{scope.row.downloadNum || '-'}}</span>
                </template>
            </el-table-column>

            <el-table-column
                label="投放时间">
                <template slot-scope="scope">
                    <div>{{scope.row.fromTime | timeInit}} - {{scope.row.toTime | timeInit}}</div>
                </template>
            </el-table-column>

            <el-table-column
                label="预计收入">
                <template slot-scope="scope">
                    <span>{{scope.row.expectMoney || '-'}}</span>
                </template>
            </el-table-column>
        </el-table>

        <div class="btn-box" v-if="changeNum > 1">
            <el-button @click="resetForm('detail')">重 置</el-button>
            <el-button type="success" @click="submitForm('detail')">保 存</el-button>
        </div>
    </div>
</template>

<script>
import { formatDate } from '@/utils/utils'

export default {
    data () {
        return {
            detail: {
                companyFullName: '', // 公司全称
                companyShortName: '', // 公司简称
                putType: '', // 投放属性 0 代理   1直投
                companyLicense: '', // 营业执照
                registerNumber: '', // 营业执照注册号
                userName: '', // 联系人
                phone: '', // 联系电话
                email: '' // 联系邮箱
            },
            tableData: [],
            loading: false,
            rules: {
                companyFullName: [
                    { required: true, message: '请输入公司全称', trigger: 'blur' }
                ],
                companyShortName: [
                    { required: true, message: '请填公司简称', trigger: 'blur' }
                ],
                putType: [
                    { required: true, message: '请选择投放属性', trigger: 'change' }
                ]
            },
            changeNum: 0
        }
    },

    created () {
        this.getSelectUserInfo()
    },

    watch: {
        detail: {
            handler: function () {
                this.changeNum++
            },
            deep: true
        }
    },

    methods: {
        // 获取用户信息
        async getSelectUserInfo () {
            if (this.loading) return
            this.loading = true
            let params = {
                companyId: this.$route.query.id
            }
            let res = await this.$http.get('/order/selectOneAdmoreUserInfo', {
                params
            })
            if (res.code === '0') {
                if (res.data) {
                    this.detail = res.data.admoreUserInfoVo || {}
                    this.tableData = res.data.putOrderInfoVo || []
                }
            } else {
                if (res.desc) {
                    this.$message({
                        type: 'error',
                        message: res.desc
                    })
                }
            }
            this.loading = false
        },

        handleAvatarSuccess (res, file) {
            if (res.code === '0') {
                this.detail.companyLicense = res.data
            } else {
                this.$message({
                    message: '系统繁忙，请好后再试',
                    type: 'error'
                })
            }
        },

        submitForm (formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.insertUserInfo()
                } else {
                    return false
                }
            })
        },

        // 保存用户信息
        async insertUserInfo () {
            if (this.loading) return
            this.loading = true
            let res = await this.$http.post('/order/updateAdmoreUserInfo', {
                admoreUserInfoVo: this.detail,
                putOrderInfoVo: []
            })
            if (res.code === '0') {
                this.$message({
                    type: 'success',
                    message: '保存成功'
                })
                this.changeNum = 0
            } else {
                if (res.desc) {
                    this.$message({
                        type: 'error',
                        message: res.desc
                    })
                }
            }
            this.loading = false
        },

        resetForm (formName) {
            this.changeNum = 0
            this.$refs[formName].resetFields()
        }
    },

    filters: {
        timeInit (val) {
            if (val) {
                return formatDate(val, 'YYYY-MM-DD')
            } else {
                return '至今'
            }
        }
    }

}
</script>

<style lang="scss" scoped>
    .client-box {
        min-height: 100%;
        padding-bottom: 20px;
        .form-box {
            max-width: 600px;
        }
        .license-tip {
            font-size: 13px;
            color: #bbbbbb;
            .tip-red {
                color: red;
                font-weight: 500;
            }
        }
        .btn-box {
            margin-top: 20px;
        }
    }
</style>
